<template>
    <div class="con">
        <!-- 上方 -->
        <div class="top">
            <div class="hosname">{{ saveInfo?.baseMap.hosname }}</div>
            <div class="line"></div>
            <div class="administrative">{{ saveInfo?.baseMap.bigname }}</div>
            <div class="office">{{ saveInfo?.baseMap.depname }}</div>
        </div>
        <!-- 中间 -->
        <div class="mid">
            <h1>{{ saveInfo?.baseMap.workDateString }}</h1>
            <div class="contianer">
                <div class="box" :class="{ active: item.status == -1 || item.availableNumber == -1,cur:item.workDate ==workTime }"
                    v-for="(item, index) in saveInfo?.bookingScheduleList" @click="clickBox(item)">
                    <div class="topTime">{{ item.workDate }}--{{ item.dayOfWeek }}</div>
                    <div class="bottomReg" v-if="item.status == -1">停止挂号</div>
                    <div class="bottomReg" v-if="item.status == 0">
                        {{ item.availableNumber == -1 ? '约满了' : `有号(${item.availableNumber})` }}
                    </div>
                    <div class="bottomReg" v-if="item.status == 1">即将放号</div>
                </div>
            </div>
            <el-pagination v-model:current-page="page" @current-change="handleSizeChange" layout="prev, pager, next"
                :total="total" />
        </div>
        <!-- 下部 -->
        <div class="bottom">
            <div class="hasReg">
                <div class="am">
                    <!-- 时间 -->
                    <div class="time">
                        <svg t="1709730409032" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="5029" id="mx_n_1709730409033" width="32"
                            height="32">
                            <path
                                d="M904.101037 676.946871H118.670712c-15.461511 0-28.105271-12.535384-28.105271-28.033021 0-15.461511 12.643759-28.105271 28.105271-28.10527h785.430325c15.461511 0 28.105271 12.643759 28.105271 28.10527s-12.607634 28.033021-28.105271 28.033021z m-56.029916-324.980738c-11.018133 10.945883-28.719396 10.945883-39.665279 0-11.018133-10.945883-11.018133-28.755521 0-39.665279l39.665279-39.665279a27.97522 27.97522 0 0 1 39.593029 0 27.93187 27.93187 0 0 1 0 39.665279l-39.593029 39.665279z m-62.279545 212.776406c-26.082269-128.027094-138.683977-224.444789-274.441826-224.44479-135.649474 0-248.287307 96.417696-274.369576 224.44479H177.915755c21.602766-158.263741 162.454244-280.583081 333.433995-280.583081 171.088125 0 311.903478 122.31934 333.506244 280.583081h-59.064418z m-274.441826-336.612997c-15.461511 0-28.033021-12.535384-28.033021-28.10527V143.95823c0-15.461511 12.535384-28.105271 28.033021-28.10527 15.569886 0 28.105271 12.643759 28.10527 28.10527v56.029916c0 15.606011-12.535384 28.141396-28.10527 28.141396zM174.700628 351.966133L135.035349 312.264729c-10.945883-10.945883-10.945883-28.755521 0-39.665279 11.018133-10.945883 28.719396-10.945883 39.665279 0l39.665279 39.665279a27.93187 27.93187 0 0 1 0 39.665279c-10.909758 10.982008-28.647146 10.982008-39.665279 0.036125z m-28.033021 381.119029h729.40041c15.497636 0 28.033021 12.535384 28.03302 28.03302a28.033021 28.033021 0 0 1-28.03302 28.033021H146.667607c-15.497636 0-28.033021-12.535384-28.03302-28.033021 0.036125-15.497636 12.571509-28.033021 28.03302-28.03302z m84.171312 112.168207h561.093911c15.497636 0 28.033021 12.535384 28.033021 28.033021 0 15.569886-12.535384 28.105271-28.033021 28.10527H230.838919c-15.497636 0-28.033021-12.535384-28.03302-28.10527 0-15.497636 12.535384-28.033021 28.03302-28.033021z"
                                fill="#87ceeb" p-id="5030"></path>
                        </svg>
                        <span>号源</span>
                    </div>
                    <div class="doc_info" v-for="(item, index) in docInfo">
                        <div class="doc_left">
                            <!-- 医生 -->
                            <div class="doc">
                                <span>{{ item.title }}医师 | {{item.docname}}</span>
                            </div>
                            <!-- 专业 -->
                            <div class="heal">
                                <span>{{ item.skill}}</span>
                            </div>
                        </div>
                        <div class="doc_right">
                            <span>￥{{item.amount}}</span>
                            <div class="but">
                                <el-button type="primary" @click="goStepTwo(item)">{{item.availableNumber}}</el-button>
                            </div>
                        </div>
                    </div>
                    <!--  -->
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getRegInfo, getOwner } from '@/api/hosDetail/index'
import type { workingSchedule, bookingScheduleList, docType, docList } from '@/api/hosDetail/type'

let $route = useRoute()
let $router = useRouter()
let total = ref<number>(0)
// page
let page = ref<number>(1)
// limit
let limit = ref<number>(6)
let workTime = ref<string>()

// 存储获取的信息
let saveInfo = ref<bookingScheduleList>()
// status
let sta = ref<number>()
// 存储医生信息
let docInfo = ref<docList>()

let hoscode = $route.query.hoscode
let depcode = $route.query.depcode

onMounted(async () => {
    await getReg()
    sta.value = saveInfo.value?.bookingScheduleList[0].status
})

const getReg = async () => {
    let result = await getRegInfo(page.value, limit.value, hoscode as string, depcode as string)
    if (result.code == 200) {
        saveInfo.value = result.data
        total.value = result.data.total
    }

}
const handleSizeChange = async () => {
    await getReg()
}

const clickBox = async (item: any) => {
    workTime.value = item.workDate
    sta.value = item.status
    let result = await getOwner(hoscode as string, depcode as string, item.workDate)
    docInfo.value = result.data
}

const goStepTwo = (item: any) => {    
    $router.push({ path: '/hospital/registered_step2', query: {hoscode:hoscode,docId:item.id} })
    
}
</script>

<style scoped lang="scss">
.con {
    margin: 20px 0 0 20px;
}

.top {
    width: 100%;
    height: 25px;
    display: flex;
    align-items: center;

    div {
        margin-right: 5px;
        color: #7f7f7f;
    }

    .line {
        width: 3px;
        height: 17px;
        background-color: #7f7f7f;
    }
}

.mid {
    width: 100%;
    min-height: 50px;
    margin-top: 20px;

    h1 {
        text-align: center;
        padding-top: 10px;
    }

    .contianer {
        width: 100%;
        display: flex;
        justify-content: space-around;
        padding-left: 20px;
        margin-top: 20px;

        .box {
            width: calc(100% / 6);
            height: 60px;
            margin-right: 20px;
            border: 1px solid #7f7f7f;
            cursor: pointer;
            transition: 1s;

            .topTime {
                width: 100%;
                height: 20px;
                background-color: skyblue;
                text-align: center;
                line-height: 20px;
            }

            .bottomReg {
                width: 100%;
                height: 40px;
                text-align: center;
                line-height: 40px;
            }

            &.active {
                border: 1px solid #ccc;
                color: #7f7f7f;

                .topTime {
                    background-color: #ccc;
                }
            }
            &.cur{
                transform: scale(1.2)
                
            }
        }
    }

    :deep(.el-pagination) {
        justify-content: center;
        margin-top: 20px;
    }
}

.bottom {
    width: 100%;

    .will {
        display: flex;
        justify-content: center;
        margin-top: 20px;
        font-size: 30px;

        .year {
            color: red;
        }

        .go {
            color: skyblue;
        }
    }

    .hasReg {
        width: 100%;

        .am {

            .time {
                display: flex;
                align-items: center;
            }

            .doc_info {
                border-bottom: 1px solid;
                display: flex;

                .doc_left {
                    width: 50%;
                    padding-bottom: 10px;

                    .doc {
                        font-size: 20px;
                        color: skyblue;
                        margin: 10px 0;
                    }
                    .heal{
                        font-size: 15px;
                        color: #7f7f7f;
                    }
                }

                .doc_right {
                    width: 50%;
                    height: 50px;
                    display: flex;
                    justify-content: end;
                    align-items: center;
                    .but{
                        margin-left: 50px;
                    }
                }
            }
        }
    }
}
</style>